<template>
    <div class="flyDuck-app-home-main-page">
        <!--搜索区域-->
        <div class="flyDuck-app-home-main-page-query">
            <el-form ref="queryForm" :model="queryParam" :inline="true">
                <el-form-item label="部门名称" prop="deptName">
                    <el-input v-model="queryParam.deptName" size="small" @keydown.enter.native="getDeptTableData"  placeholder="请输入部门名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="getDeptTableData" icon="el-icon-search">搜索</el-button>
                    <el-button size="mini" @click="resetQuery" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--按钮区域-->
        <div class="flyDuck-app-home-main-page-button">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" size="mini" icon="el-icon-plus" @click="openAddDialog" v-has="'/system/sysDeptController/addDept'">新增</el-button>
                </el-col>
            </el-row>
        </div>
        <!--表格区域-->
        <div class="flyDuck-app-home-main-page-table">
            <el-table :data="deptTableData"  size="mini" height="400px" row-key="id"
                      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column align="center" prop="id" label="部门编码"></el-table-column>
                <el-table-column align="center" prop="deptName" label="部门名称"></el-table-column>
                <el-table-column align="center" prop="sort" label="排序"></el-table-column>
                <el-table-column align="center" prop="status" label="状态" :formatter="statusFormatter"></el-table-column>
                <el-table-column align="center" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="openUpdateDialog(scope.row)" v-has="'/system/sysDeptController/updateDept'">编辑</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteDept(scope.row)" v-has="'/system/sysDeptController/deleteDept'">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--弹窗-->
        <div class="flyDuck-app-home-main-page-dialog">
            <el-dialog :title="title" :visible.sync="dialogVisible" width="500px">
                <el-form ref="deptForm" :rules="rules" :model="deptForm"  :validate-on-rule-change="false" label-width="80px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="部门编码" prop="id">
                                <el-input :disabled="title == '编辑部门'?true:false" v-model="deptForm.id" placeholder="请输入部门编码"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="部门名称" prop="id">
                                <el-input v-model="deptForm.deptName" placeholder="请输入部门名称"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="上级部门" prop="parentId">
                                <treeselect v-model="deptForm.parentId" clearable :options="deptTreeOptions" :normalizer="normalizer" placeholder="选择上级部门" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="排序" prop="sort">
                                <el-input-number v-model="deptForm.sort" :min="1"></el-input-number>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="状态" prop="status">
                                <el-switch style="margin-top: 10px" v-model="deptForm.status" active-value="1" inactive-value="2" active-color="#13ce66" ></el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import SingleUpload from '@/components/upload/singleUpload'
    import {getDeptTreeList,getDeptDetail,addDept,updateDept,deleteDept,getDeptTreeSelect} from '@/api/system/dept'
    import {getDictOptionList} from '@/api/system/dict'
    export default {
        components:{Treeselect ,SingleUpload},
        name: "SysDept",
        data() {
            return {
                /*搜索区域*/
                queryParam:{
                    deptName:'',
                },
                /*按钮区域*/
                /*表格区域*/
                deptTableData:[],
                statusOptions:[],
                /*弹窗区域*/
                dialogVisible:false,
                title:'',
                deptForm:{
                    id:null,
                    parentId: null,
                    sort: '',
                    status: '1',
                    deptName: '',
                },
                deptTreeOptions:[],
                rules:{
                    deptName:[{required:true, message:'请输入昵称', trigger:'blur'}],
                    sort:[{required:true, message:'请输入排序', trigger:'blur'}],
                    id:[{required:true, message:'请输入部门编码', trigger:'blur'}],
                },
            };
        },
        mounted() {
            this.getDeptTableData();
            this.getDeptTree();
            this.getStatusOptions();
        },
        methods: {
            /*搜索区域*/
            /*按钮区域*/
            openAddDialog(){
                this.title = '添加部门';
                this.resetDeptForm();
                this.dialogVisible = true;
            },
            resetDeptForm(){
                this.deptForm = {
                    id:null,
                    parentId: null,
                    sort: '',
                    status: '1',
                    deptName: '',
                };
            },
            openUpdateDialog(data){
                this.title = '编辑部门';
                //回显
                getDeptDetail(data.id).then(data => {
                    this.deptForm = data;
                })
                this.dialogVisible = true;
            },
            resetQuery(){
                debugger
                this.queryParam.deptName = '';
                this.page = 1;
                this.getDeptTableData();
            },
            /*表格区域*/
            getStatusOptions(){
                getDictOptionList(`status`).then(data => {
                    this.statusOptions = data;
                })
            },
            statusFormatter(row, column) {
                return this.selectDictLabel(this.statusOptions, row.status);
            },
            getDeptTableData(){
                getDeptTreeList(this.queryParam).then(data=>{
                    this.deptTableData = data;
                })
            },
            deleteDept(data){
                this.$confirm(`是否删除${data.deptName}?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteDept(data.id).then(data=>{
                        if(data){
                            this.getDeptTableData();
                            this.getDeptTree();
                        }
                    })
                })
            },
            /*弹窗区域*/
            getDeptTree(){
                var params = {};
                getDeptTreeSelect().then(data=>{
                    this.deptTreeOptions = data;
                })
            },
            normalizer(node) {
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.id,
                    label: node.deptName,
                    children: node.children
                };
            },
            submitForm(){
                if(this.title === '编辑部门'){
                    //编辑
                    this.$refs['deptForm'].validate(valid=>{
                        if(valid){
                            updateDept(this.deptForm).then(data => {
                                if(data){
                                    debugger
                                    this.getDeptTableData();
                                    this.getDeptTree();
                                    this.dialogVisible = false;
                                }
                            })
                        }
                    })
                }else {
                    //新增
                    this.$refs['deptForm'].validate(valid=>{
                        if(valid){
                            addDept(this.deptForm).then(data => {
                                if(data){
                                    this.getDeptTableData();
                                    this.getDeptTree();
                                    this.dialogVisible = false;
                                }
                            })
                        }
                    })
                }


            },
        },
    }
</script>
<style>
</style>

